<template>
	<view>
		<tt-bar leftIcon="icon-back" title="确认订单"></tt-bar>

		<view class="lissBox"   data-url="memberList" data-select="1" @tap="toPage" >
			<view class="listRow studentBox">
				<image src="@/pagesA/static/renyuan.png"></image>
				<text class="studentName">{{defaultMember[0].name}}</text>
				<text class="tel">{{defaultMember[0].phone}}</text>
				<text class="iconfont icon-right"></text>
			</view>

		</view>
		<scroll-view scroll-y="true" :style="{'height':scHeight+'px'}">
			<view class="carList">
				<block v-for="(item,index) in confirmList" :key="index">
					<view class="shopRow">
						<view class="titleBox">
							<text class="iconfont icon-shoucangdianjia"></text>
							<text class="shopName">{{item.storeName}}</text>
						</view>
						<confirmGood :goodInfo="item"></confirmGood>
					</view>
				</block>

			</view>
		</scroll-view>
		<view class="btmOp">
			<view class="payTypeBox">
				<view class="yyBox" @tap="seletType" data-type="0">
					<text class="iconfont" :class="[payType==0?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">预约金支付:</text>
					<text class="price">￥{{pricePre}}</text>
				</view>
				<view class="yyBox" @tap="seletType" data-type="1">
					<text class="iconfont" :class="[payType==1?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">全款支付:</text>
					<text class="price">￥{{priceAll}}</text>
				</view>
			</view>
			<view class="btnBox">
				<text>{{payType==0?'预约金合计':'全款合计'}}：</text>
				<text class="pirceAll">￥{{payType==0?pricePre:priceAll}}</text>
				<button @tap="postOrder">确认订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import confirmGood from "@/pagesA/components/confirmGood/confirmGood.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,
			confirmGood
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(426),
				goodInfo: null,
				payType: 0,
				priceAll: 0,
				pricePre: 0,
				memberInfo: null,
				confirmList: null,
				memberIndex:0,
				defaultMember:[{
					name:'学员1',
					phone:'18712345678'
				}],
			};
		},
		methods: {
			seletType(e) {
				this.payType = parseInt(e.currentTarget.dataset.type)

			},
			getMember() {
				this.$store.dispatch("apiGetMemberList", {
					"userId": this.userInfo.userId,
					"page_no": 1,
					"page_size": 10
				}).then(res => {
					this.memberInfo = res.data.data.items,
					this.defaultMember=res.data.data.items.filter(x=>{
						return x.used==1
					})
					if(this.defaultMember.length<1){
						this.defaultMember=[res.data.data.items[0]]
					}
				})
			},
			postOrder() {
				uni.showLoading({
					title: '正在提交订单',
					mask: false
				});
				// let _arr=[];
				// this.confirmList.forEach((x)=>{
				// 	_arr.push(x.id)
				// })
				// this.$store.dispatch("carPostOrder", {
				// 	userId: this.userInfo.userId,
				// 	items: _arr,
				// 	payAll: this.payType
				// }).then(res => {
				// 	uni.hideLoading();
				// 	let _idStr=res.data.data.join(",");
				// 	this.toPage({
				// 		url:'pay',
				// 		id:_idStr
				// 	})
					
				// })
				this.$store.dispatch("apiPostOrder",{
					userId:this.userInfo.userId,
					memberId:this.memberInfo[this.memberIndex].id,
					courseId:this.confirmList[0].courseId,
					payAll:this.payType
				}).then(res=>{
					uni.hideLoading();
					let _idStr=res.data.data.join(",");
					uni.redirectTo({
						url:'/pages/pay/pay?id='+_idStr
					})
					
				})
			},
			// 计算总预约金
			getPrepay() {
				let n = 0
				this.confirmList.forEach((x) => {
					n = n + x.prepay
				})
				this.pricePre = n.toFixed(2);
			},
			// 计算总价
			getPrice() {
				let n = 0
				this.confirmList.forEach((x) => {
					n = n + x.price
				})
				this.priceAll = n.toFixed(2);
			}
		},
		onLoad() {

			this.confirmList = uni.getStorageSync("confirmList");
			this.getPrepay();
			this.getPrice();
			this.getMember();
			uni.$on("selectMember",payload=>{
				this.memberIndex=payload.index,
				this.defaultMember=[this.memberInfo[payload.index]]
			})

		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getPrepay();
				this.getPrice();
				this.getMember();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" >
	// @import "../../common/public.less";

	page {
		background-color: #f6f6f6;
	}

	.lissBox {
		display: flex;
		flex-direction: column;
		padding: 18upx;

		.listRow {
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			background-color: #FFFFFF;
			border-radius: 10upx;
		}

		.studentBox {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx 0 40upx;
			font-size: 32upx;
			color: #202932;

			image {
				width: 48upx;
				height: 48upx;
				margin-right: 20upx;
			}

			.studentName {
				margin-right: 20upx;
				font-weight: bold;
			}

			.tel {
				flex-grow: 1;
				font-weight: bold;
			}

			.iconfont {
				color: #c9c9c9;
				font-size: 40upx;
				font-weight: normal;
			}

		}
	}

	.carList {
		padding: 10upx 18upx 0upx 18upx;
		display: flex;
		flex-direction: column;

		.shopRow {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 20upx;
			margin-bottom: 24upx;

			.titleBox {
				padding: 24upx 40upx;
				display: flex;
				align-items: center;

				.icon-shoucangdianjia {
					color: #202932;
					font-size: 40upx;
					margin-right: 10upx;
				}


				.shopSelect {
					font-size: 44upx;
					margin-right: 40upx;
					color: #c3c3c3;
				}

				.icon-yuanxingxuanzhongfill {
					color: #ffcd11;
				}

				.shopName {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
					flex: 1;
				}

				.icon-right {
					color: #9a9a9a;
					font-size: 32upx;
				}
			}
		}
	}

	.btmOp {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 180upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.payTypeBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 75upx;
			background-color: #f8e4a9;
			font-size: 28upx;
			padding: 0 36upx;

			.yyBox {
				display: flex;
				align-items: center;
			}

			.iconfont {
				font-size: 40upx;
				color: #ff8f2c;
				font-weight: normal;
				margin-right: 6upx;
			}

			.typeText {
				color: #a17f68;

			}

			.price {
				font-size: 28upx;
				color: #ff3b2b;
			}
		}

		.btnBox {
			height: 105upx;
			display: flex;
			align-items: center;
			padding: 0 36upx;

			button {
				margin: 0;
				margin-left: 20upx;
				height: 80upx;
				line-height: 80upx;
				padding: 0 40upx;
				border-radius: 40upx;
				border: none;
				color: #FFFFFF;
				font-size: 32upx;
				font-weight: bold;
				background: linear-gradient(to right, #ff572a, #ff0d3f);

			}

			button:after {
				border: none;
				outline: none;
			}

			text {
				font-size: 28rpx;
				color: #202932;
			}

			.pirceAll {
				font-size: 42rpx;
				font-weight: bold;
				color: #ff3b2b;
				flex-grow: 1;
			}
		}
	}
</style>
